<!DOCTYPE html>
<html>

<head>
  <title><%= title %></title>
  <link rel="stylesheet" href="iconfont/iconfont.css">
  <link rel="stylesheet" href="stylesheets/reset.css">
  <link rel="stylesheet" href="/stylesheets/theme.css">
  <!-- 引入jQuery -->
  <script src="/javascripts/jquery-3.4.1.js"></script>
  <meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=0">
  <style>
    .input-container {
      padding: 1vh 2vw;
      border-radius: 0 0 1vw 1vw;
      background: linear-gradient(90deg, #5fdded 0, #00bcd4 100%);
      display: flex;
    }

    .input-area {
      flex: 1;
      background: #d6f1f4;
      border: none;
      border-radius: 2vw 0 0 2vw;
      padding: 1vh 1.5vw;
      font-size: 2vmax;
      color: #6b6464;
    }

    .input-btn {
      margin-right: 2vw;
      margin-left: auto;
      border-radius: 0 10% 10% 0;
      padding: 1vh 2vw;
      text-align: center;
      vertical-align: middle;
      background: #5fdded;
      box-shadow: #177b88 1px 1px 12px;
      cursor: pointer;
      user-select: none;
    }


    .input-btn:active {
      box-shadow: none;
    }

    .input-btn i {
      font-size: 2.5vmax;
      color: #fff;
    }

    .output-container {
      margin-top: 1vh;
    }


    .todo-item {
      display: flex;
      background: #fff;
      box-shadow: #dedede 1px 1px 4px;
      margin: 1.5vw;
      padding: 1vh 1vw;
      align-items: center;
      border-radius: 10px;
    }

    .todo-content {
      flex: 1;
      white-space: nowrap;
      text-overflow: ellipsis;
      overflow: hidden;
      word-break: break-all;
      margin: 1vh 1vw;
      color: #6b6464;
    }

    .todo-check {
      margin: 0 1vw;
      color: #dedede;
    }

    .todo-complete {
      color: #4caf50;
    }

    .todo-delete {
      margin: 0 1vw;
      color: #ff6262;
    }

    #complete-hr {
      width: 70%;
      margin: 2vh auto;
    }
  </style>

</head>

<body>
  <div class="input-container">
    <input type="text" class="input-area" placeholder="输入待办事项" id="todo-input">
    <div class="input-btn" onclick="createTodo()"><i class="iconfont">&#xe601;</i></div>
  </div>
  <div class="output-container">
    <ul class="todo-list">
      <% for(let i =0;i<todoList.length;i++) { %>
      <% if(todoList[i].complete === '0'){ %>
      <li class="todo-item">
        <p class="todo-content" onclick="showDetail('<%= todoList[i]._id %>')"><%= todoList[i].content  %> </p>
        <i class="iconfont todo-delete" onclick="deleteTodo('<%= todoList[i]._id %>')">
          &#xe607;
        </i>
        <i class="iconfont todo-check" onclick="completeTodo('<%= todoList[i]._id %>')">&#xe60e;</i>
      </li>
      <%         }} %>
    </ul>
    <hr id="complete-hr">
    <ul class="complete-list">
      <% for(let i =0;i<todoList.length;i++) { %>
      <% if(todoList[i].complete === '1'){ %>
      <li class="todo-item">
        <p class="todo-content" onclick="showDetail('<%= todoList[i]._id %>')"><%= todoList[i].content  %> </p>
        <i class="iconfont todo-delete" onclick="deleteTodo('<%= todoList[i]._id %>')">
          &#xe607;
        </i>
        <i class="iconfont todo-check todo-complete" onclick="uncompleteTodo('<%= todoList[i]._id %>')">&#xe60e;</i>
      </li>
      <%         }} %>
    </ul>
  </div>
  <script>
    function showDetail(id) {
      location.href = '/detail/' +  id
    }
    function createTodo() {
      let content = $("#todo-input").val()
      if (content !== '' && content && content !== null) {
        $.ajax({
          type: "POST",
          url: "/",
          data: { content: content },
          success: function () {
            window.location.reload()
          }
        })
      } else {
        alert("输入不能为空")
      }

      // console.log(id);
    }
    function deleteTodo(id) {
      $.ajax({
        type: "DELETE",
        url: "/" + id,
        success: function () {
          window.location.reload()
        }
      })
      // console.log(id);
    }
    function completeTodo(id) {
      $.ajax({
        type: "PUT",
        url: "/" + id,
        data: { complete: '1' },
        success: function () {
          window.location.reload()
        }
      })
      console.log(id);
    }
    function uncompleteTodo(id) {
      console.log(id);
      $.ajax({
        type: "PUT",
        url: "/" + id,
        data: { complete: '0' },
        success: function () {
          window.location.reload()
        }
      })
    }
  </script>
</body>

</html>